<template>
    <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:15px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addUser">新增</el-button>
                </el-form-item>
                <router-link to="/user/import">
                    <el-button type="primary">导入用户</el-button>
                </router-link>
                <el-button type="primary" @click="exportWord">导出<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-form>
        </el-col>


        <el-table :data="userInfoList" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="id" width="180" >
            </el-table-column>
            <el-table-column prop="username" label="名字" width="180">
            </el-table-column>
            <el-table-column prop="password" label="密码" width="180">
            </el-table-column>
            <!--第二步  开始进行修改和查询操作-->
            <el-table-column label="操作" align="center" min-width="100">

                <template slot-scope="scope">

                    <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>

                    <el-button type="primary" @click="modifyUser(scope.row)">修改</el-button>

                    <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <!--编辑与增加的页面-->


        </el-table>
        <!--新增界面-->
        <el-dialog title="记录" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
            <el-form :model="addFormData" :rules="rules2" ref="addFormData" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input type="text" v-model="addFormData.username" auto-complete="off" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="addFormData.password" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click.native="dialogVisible = false,addFormData={id:'',username:'',password:''}">取 消</el-button>
                <el-button v-if="isView" type="primary" @click.native="addSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import axios from 'axios';
    import qs from 'qs';
    export default {
        name: 'home',
        data() {
            return {
                userInfoList: [],
                addFormReadOnly: true,
                dialogVisible: false,
                isView: true,
                addFormData: {
                    id: '',
                    username: '',
                    password: ''
                },
                rules2: {
                    username: [{
                        required: true,
                        message: '用户名不能为空',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }]
                },
                filters: {
                    name: ''
                },
                token:''
            }
        },

        methods: {
             exportWord() {
                this.$exportExcel({
                    url: "/user/exportExcel",
                    data: {},
                    responseType: "blob",
                    fileName: "用户记录",
                    method: 'post'
                });
            },
            tableRowClassName({row,rowIndex}){
                // console.log("rowIndex: ",rowIndex);
                if (this.token == row.username) {
                    return 'success-row';
                }
                    return '';
            },
            loadData() {
                // let param = {filter:this.filters.name};
                this.axios.get(this.$baseUrl()+'/user/userlist').then((res) => {
                    console.log(res);                    
                    this.userInfoList = res.data.data;
                });


            },
            getUsers() {
                this.axios.get('user/fuzzyQuery/'+this.filters.name).then(res => {
                    console.log("res: ",res);
                    if(res.data.code===200){
                        this.userInfoList = res.data.data;
                    }
                })
            },
            addUser() {
                this.addFormData = {
                    id: '',
                    username: '',
                    password: ''
                };
                this.isView = true;
                this.dialogVisible = true;
                //    this.addFormReadOnly = false;
            },
            checkDetail(rowData) {
                this.addFormData = Object.assign({}, rowData);
                this.isView = false;
                this.dialogVisible = true;

                //    this.addFormReadOnly = true;
            },
            modifyUser(rowData) {
                this.addFormData = Object.assign({}, rowData);
                this.isView = true;
                this.dialogVisible = true;
                //    this.addFormReadOnly = false;
            },
            deleteUser(row) {

                this.$alert('是否删除这条记录', '信息删除', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action=='confirm'){
                            this.axios.post("/user/delete/"+row.id).then((res) => {
                            console.info(res);
                            if (res.data.code===200) {
                                this.$message({
                                    type: 'success',
                                    message: `已删除`
                                });
                                if(row.username==this.token){
                                    localStorage.removeItem("access-token");
                                    // this.$router.go(0);
                                    // location.reload();
                                    this.$router.push("/login")
                                }else{
                                    this.loadData();
                                }
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: `删除失败`
                                });

                            }
                        });
                        }
                    }
                });

            },
            //增加一条记录
            addSubmit() {

                //先判断表单是否通过了判断
                this.$refs.addFormData.validate((valid) => {
                    //代表通过验证 ,将参数传回后台
                    if (valid) {
                        // console.log(this.addFormData);
                        let param = this.addFormData;
                        axios.post(this.$baseUrl()+"/user/submit", this.$qs.stringify(param)).then(res => {
                            console.log(res);
                            
                            if (res.data.code===200) {
                                if(this.addFormData.id){
                                    this.$message({
                                            type: 'success',
                                            message: '修改成功',
                                        }); 
                                }else{
                                    this.$message({
                                            type: 'success',
                                            message: '添加成功',
                                        });
                                }
                                this.loadData();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.message
                                });
                            }
                            this.dialogVisible = false;
                        });
                    }

                });
            }
        
        },
        created(){
            this.token = JSON.parse(localStorage.getItem("access-token"));
            console.log("token: ",this.token);
            if(!this.token){
                console.log("aaa");
                this.$router.push("/login");
            }
            this.loadData();
        }
    }
</script>

<style>
body {
        background: #DFE9FB;
    }
.demo-ruleForm{
  margin-left: 10%;  
  width: 80%;
}
.el-table .success-row {
    background: #f0f9eb;
  }
</style>